$(document).ready(function(){
        // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX des nouveaux environnements
        load_jquery_properties();
    });
    
    // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX des nouveaux environnements
    function load_jquery_properties(){

        $('.carte').draggable({disabled: false});

        // On charge l'écran en fondu
        $('#content').fadeIn(1000);


        // Animation des cartes à collectionner
        
        $('.carte').mouseover(function(){
            $(this).css('cursor','pointer');
        });
        
        $('#carte_1').click(function(){
            if($(this).hasClass('active')){
                $('#overlay_album').fadeOut(500, function(){
                    $(this).css('zIndex','50');
                });
                $(this).removeClass('active');
                $('.carte').draggable({disabled: false});
                $(this).animate({
                    left: "+=550px",
                    top: "-=50px",
                    width: "-=210px",
                    height: "-=300px"
                }, 800);
            }
            else{
                $('#overlay_album').fadeIn(500);
                $(this).addClass('active');
                $(this).css('zIndex','100');
                $('.carte').draggable({disabled: true});
                $(this).animate({
                    left: "-=550px",
                    top: "+=50px",
                    width: "+=210px",
                    height: "+=300px"
                }, 800);
            }
        });
        
        $('#carte_2').click(function(){
            if($(this).hasClass('active')){
                $('#overlay_album').fadeOut(500, function(){
                    $(this).css('zIndex','50');
                });
                $(this).removeClass('active');
                $('.carte').draggable({disabled: false});
                $(this).animate({
                    left: "+=550px",
                    top: "+=94.8px",
                    width: "-=210px",
                    height: "-=300px"
                }, 800);
            }
            else{
                $('#overlay_album').fadeIn(500);
                $(this).addClass('active');
                $(this).css('zIndex','100');
                $('.carte').draggable({disabled: true});
                $(this).animate({
                    left: "-=550px",
                    top: "-=94.8px",
                    width: "+=210px",
                    height: "+=300px"
                }, 800);
            }
        });

        $('#carte_3').click(function(){
            if($(this).hasClass('active')){
                $('#overlay_album').fadeOut(500, function(){
                    $(this).css('zIndex','50');
                });
                $(this).removeClass('active');
                $('.carte').draggable({disabled: false});
                $(this).animate({
                    left: "+=550px",
                    top: "+=235.6px",
                    width: "-=210px",
                    height: "-=300px"
                }, 800);
            }
            else{
                $('#overlay_album').fadeIn(500);
                $(this).addClass('active');
                $(this).css('zIndex','100');
                $('.carte').draggable({disabled: true});
                $(this).animate({
                    left: "-=550px",
                    top: "-=235.6px",
                    width: "+=210px",
                    height: "+=300px"
                }, 800);
            }
        });
    }


    function goToChapters(chapter_id){

        var data_result = {
            chapter_id : chapter_id
        };
        $('#zone_interaction').fadeOut(1000, function(){

            $.ajax({
            // url vers la méthode de chargement du nouvel environnement
            url: 'loadNewChapter',
            // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
            type: 'POST',
            // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
            async : false,
            // Données à transmettre et mises en forme précédemment
            data: data_result,
            success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                    // Insertion de la vue du nouvel environnement chargée par le controleur
                    $('#zone_interaction').html(msg);
                    if(chapter_id>0){
                        $('#content').css('background-image','url("../../assets/images/commun/commun_background'+chapter_id+'.jpg")');
                    }
                    else{
                        $('#content').css('background-image','url("../../assets/images/commun/background_menu.jpg")');
                    }
                    // Apparition progressive du nouvel environnement et lancement de la fonction de...
                    $('#zone_interaction').fadeIn(2000);
                    
                    // Nouvelle requête Ajax pour charger la zone de navigation
                    $.ajax({
                        // url vers la méthode de chargement du nouvel environnement
                        url: 'loadZoneNavigation',
                        // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                        type: 'POST',
                        // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                        async : false,
                        // Données à transmettre et mises en forme précédemment
                        data: data_result,
                        success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                                // Insertion de la vue du nouvel environnement chargée par le controleur
                                $('#zone_basse').html(msg);
                                
                                load_jquery_properties();
                            }
                        });
                }
            });
        });
    }